<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(images/grassland.png);}
			#mytank{position: absolute;left:10px;top:100px}
		</style>
	</head>
	<body>		
		<img id="mytank" src="images/down.png"/>
		<script>
   let img = document.getElementById('mytank');
   /* let img1= document.querySelector('mytank'); */
    document.addEventListener('keydown', function(event) {
        switch (event.keyCode) {
            case 37: 
				    if (event.key === 'ArrowLeft') {					/* 胡少康219971311 */
				        let newPosition = img.offsetLeft - 10;
				        if (newPosition >= 0) {
				            // 移动图片
				            img.style.left = newPosition + 'px';
				        }
				    }
				
               /* img.style.left = img.offsetLeft - 10 + 'px'; */
			   img.src='images/left.png'					/* 换一张图片 */
                break;
            case 38: // up arrow
			if (event.key === 'ArrowUp') {
			    let newPosition = img.offsetTop - 10;
			    if (newPosition >= 0) {
			        // 移动图片
			        img.style.top = newPosition + 'px';
			    }
			}
                /* img.style.top = img.offsetTop - 10 + 'px'; */
				img.src='images/up.png'
                break;
            case 39: // right arrow
                img.style.left = img.offsetLeft + 10 + 'px';
				img.src='images/right.png'
                break;
            case 40: // down arrow
                img.style.top = img.offsetTop + 10 + 'px';
				img.src='images/down.png'
                break;
        }
    });
		</script>
	</body>
</html>
